<script lang='ts' setup>
import {computed, watch} from "vue";
import { type ECOption, useEcharts } from "@/hooks/useEcharts";
const props = defineProps({
  dataNumber: {
    type: Number,
    default: 0,
  },
  shareNumber: {
    type: Number,
    default: 10,
  },
  color: {
    type: String,
    default: "#8AFFFB",
  },
  bgImgUrl: {
    type: String,
    default: "src/assets/image/echartBgImg/MeterViewBgImg1.png",
  }
})
const bgimg = new Image();
bgimg.src = props.bgImgUrl;
const dataNumberCopy = computed(() => {
  return props.dataNumber >= 100 ? 100 : props.dataNumber;
});
// 总数100,分为shareNumber份,每份的长度
const itemNumber= computed(() => {
  return 100 / props.shareNumber;
});
// dataNumber整数份
const dataNumber = computed(() => {
  return Math.floor(dataNumberCopy.value / itemNumber.value);
});
// dataNumber小数份
const dataNumberDecimal = computed(() => {
  return dataNumberCopy.value % itemNumber.value;
});

const dataStyle = (Proportion: number) => {
  return {
    value: Proportion * itemNumber.value,
    itemStyle: {
      color: props.color,
    },
  };
};
const EmptyStyle = computed(() => {
  return {
    value: 100 - props.dataNumber,
    itemStyle: {
      opacity: 0
    },
  }
});
const DataComputed = computed(() => {
  const data = [];
  for (let i = 0; i < dataNumber.value; i++) {
    data.push(dataStyle(1));
  }
  if(dataNumberDecimal.value > 0){
    data.push(dataStyle(dataNumberDecimal.value / itemNumber.value));
  }
  data.push(EmptyStyle.value);
  return data;
});
const pieOptions = computed<ECOption>(() => {
  const option: ECOption = {
    series: [
      // 主要展示层的
      {
        type: "pie",
        radius: ["70%", "90%"],
        center: ["50%", "50%"],
        zlevel: 10,
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: DataComputed.value as any,
        // 饼图分割线
        itemStyle: {
          borderColor: "#172231",
          borderWidth: 2,
        },
        // 鼠标悬浮时样式
        emphasis: {
          disabled: true,
        },
        cursor: "default",
      },
      // 圆环
      {
        type: "pie",
        zlevel: 10,
        radius: ["95%", "100%"],
        center: ["50%", "50%"],
        label: {
          show: true,
          position: "center",
          formatter: `${props.dataNumber}%`,
          color: props.color,
          fontSize: 20,
          fontWeight: 500,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: props.color,
            },
          },
        ],
        // 鼠标悬浮时样式
        emphasis: {
          disabled: true,
        },
        cursor: "default",
      },
      // 背景圆
      {
        type: "pie",
        radius: ["90%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            itemStyle: {
              // color: "#12E7E8",
              color: {
                image: bgimg,
                repeat: 'no-repeat',
              }
            },
          },
        ],
        // 鼠标悬浮时样式
        emphasis: {
          disabled: true,
        },
        cursor: "default",
      },
    ],
  };
  return option;
});
const { domRef: lineRef } = useEcharts(pieOptions);
</script>
<template>
  <div ref="lineRef" class="MeterViews " />
</template>

<style scoped>
.MeterViews {
  width: 100%;
  height: 100%;
}
</style>
